<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>任务二：零基础JavaScript编码（二）</title>

	<style type="text/css">
		* {
			padding: 0;
			margin: 0;
			box-sizing: border-box;
		}
		.content {
			width: 400px;
			height: 200px;
			margin: 100px auto;
		}
		#sort-btn {
			padding: 10px;
			margin-top: 20px;
		}
	</style>
</head>
<body>
<div class="content">
	<h3>污染城市列表</h3>
	<ul id="source">
		<li>北京空气质量：<b>90</b></li>
	    <li>上海空气质量：<b>70</b></li>
	    <li>天津空气质量：<b>80</b></li>
	    <li>广州空气质量：<b>50</b></li>
	    <li>深圳空气质量：<b>40</b></li>
	    <li>福州空气质量：<b>32</b></li>
	    <li>成都空气质量：<b>90</b></li>
	</ul>
	<h3>排序后：</h3>
	<ul id="resort">
		
	</ul>
	<button id="sort-btn">排序</button>
</div>
<script type="text/javascript">
	function getData() {
		var weatherDatas = [];
		var weather_ul = document.getElementById("source");
		var weather_li = weather_ul.getElementsByTagName("li");
		for(var i=0; i < weather_li.length; i++){
			var city = weather_li[i].innerText.slice(0,2);
			var weather = weather_li[i].getElementsByTagName("b")[0].innerHTML;
			var data = [city,weather];
			weatherDatas[i] = data;
		}
		return weatherDatas;
	}
	function sortAqiData(weatherDatas){
		var data = weatherDatas;
		for(var i=0; i<data.length;i++){
			for(var j=0; j<data.length-1-i;j++){
				if(data[j][1]>data[j+1][1]){
					var temp = data[j][1];
					data[j][1] = data[j+1][1];
					data[j+1][1] = temp;
				}
			}
		}
		return data;
	}
	function render(weatherDatas){
		var resort = document.getElementById("resort");
		for(var key in weatherDatas){
			var item = weatherDatas[key];
			var node = document.createElement("li");
			var para = document.createTextNode(item[0]+"："+item[1]);
			node.appendChild(para);
			resort.appendChild(node);
		}
		
	}
	function btnHandle(){
		var aqiData = getData();
		aqiData = sortAqiData(aqiData);
		render(aqiData);
	}
	function init(){
		var sortbtn = document.getElementById("sort-btn");
		sortbtn.addEventListener("click",btnHandle);
	}
	init();
</script>
</body>
</html>
